<template>
	<view class="container">
		<view class="cash-wrap">
			<view class="title">提现数量</view>
			<view class="input">
				<input type="text" v-model="cashMoney" @input="getVal" :placeholder="placeholder"
					placeholder-style="color:#999999;font-size:28rpx" />
			</view>
			<view class="rate-con">
				<view class="rate-num">提现手续费：{{rateMoney}}元</view>
				<text>实际到账：{{paymentMoney}}元</text>
			</view>
			<view class="tip">
				<rich-text :nodes="cashDesc"></rich-text>
			</view>
			<view class="cash-way-wrap">
				<view class="cash-way-con">
					<label>提现方式</label>
					<view class="call" @tap='toAli'>
						{{form ? '切换':'去输入'}}<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="account" v-show='form'>
					<view class="account-name"><label>姓名</label>{{form.ali_name}}</view>
					<view class="account-name"><label>卡号</label>{{call}}</view>
					<view class="account-name"><label>开户行</label>{{form.ali_extra}}</view>
				</view>
			</view>
			
			<button class="btn base-btn line-center" :disabled="isDisabled" @tap='drawModal'>申请提现</button>
			<modal :showModal="showModal">
				<view class="cash-modal animated" :class="[showModal ? 'zoomIn':'zoomOut']">
					<view class="title">提现详情</view>
					<view class="num-item line-v-center">
						<label>提现数量</label>
						<text>{{cashMoney}}</text>
					</view>
					<view class="num-item2 line-v-center">
						<label>手续费</label>
						<text>{{rateMoney}}</text>
					</view>
					<view class="num-item3 line-v-center">
						<label>实际到账</label>
						<text>{{paymentMoney}}</text>
					</view>
					<view class="modal-btn-wrap">
						<view class="modal-btn modal-btn1 line-center" @tap="close">取消</view>
						<button class="modal-btn modal-btn2 line-center" :disabled="isDraw" :loading="isDraw"
							@tap='drawMoney'>确认提现</button>
					</view>
				</view>
			</modal>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import modal from '@/components/modal/modal.vue'
	import debounce from '@/utils/debounce.js';
	export default {
		components: {
			modal,
		},
		data() {
			return {
				showModal: false,
				cashMoney: '',
				rateMoney: 0,
				paymentMoney: 0,
				cashDesc: '',
				form: '',
				isDisabled: true,
				call: '',
				isDraw: false,
				cashMin:0,
				placeholder:''
			};
		},
		onShow() {
			this.getCashDetail();
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				let that = this;
				app.globalRequest({
					api: app.getApi().user.getUserInfo,
				}).then(res => {
					if (res.code == 0) {
						that.placeholder = `可提现金额${res.data.contribution}`;
					} 
				}).catch(err => {
			
				})
			},
			getCashDetail() {
				app.globalRequest({
					api: app.getApi().cash.cashContributionInfo,
				}).then(res => {
					if (res.code == 0) {
						this.form = res.data.userAccount;
						if (this.form) {
							this.call = this.form.ali_account.replace(/(?<=\d{4})\d+(?=\d{4})/,"****")
						}
						if(this.cashMoney){
							this.getDrawRate(this.cashMoney ? this.cashMoney : 0)
						}
						this.setBtnStatus()
						this.cashDesc = res.data.cashSetting.cash_desc;
						this.cashMin = res.data.cashSetting.cash_min;
					}
				})
			},
			getVal(e) {
				const v = this.$trim(e.detail.value);
				console.log('v',v)
				console.log('this.cashMin',this.cashMin)
				console.log('v < this.cashMin',parseFloat(v) < parseFloat(this.cashMin))
				if(parseFloat(v) < parseFloat(this.cashMin)){
					return;
				}
				this.cashMoney = v;
				this.setBtnStatus()
				this.getDrawRate(this.cashMoney ? this.cashMoney : 0)
			},
			setBtnStatus(){
				if (this.cashMoney && this.form) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
			},
			getDrawRate(price = 0) {
				app.globalRequest({
					api: app.getApi().cash.cashContribution,
					data: {
						contributionValue: price,
					}
				}).then(res => {
					if (res.code == 0) {
						this.rateMoney = res.data.serviceMoney;
						this.paymentMoney = res.data.payment_money;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						this.rateMoney = 0;
						this.paymentMoney = 0;
					}
				})
			},
			drawModal() {
				this.showModal = true;
			},
			drawMoney(){
				let that = this;
				that.isDraw = true;
				app.globalRequest({
					api:app.getApi().cash.cashContribution,
					method:'POST',
					data:{
						contributionValue:that.cashMoney
					}
				}).then(res=>{
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
							that.isDraw = false;
							var pages = getCurrentPages();
							var page = pages[pages.length - 1];
							page.$vm.page = 1;
							page.$vm.totalPage = 1;
							page.$vm.list = [];
							page.$vm.getList();
							console.log('page',page)
						},300)
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						that.isDraw = false;
					}
				})
			},
			toAli() {
				uni.navigateTo({
					url: `/pages/ali-account/ali-account`
				})
			},
			close() {
				this.showModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 0 24rpx;
		font-size: 28rpx;
	}

	.cash-wrap {
		padding: 46rpx 0 32rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
			line-height: 40rpx;
		}

		.input {
			padding: 60rpx 0;
			text-align: center;
			border-bottom: 1px solid #EEEEEE;

			input {
				font-size: 60rpx;
			}
		}

		.rate-con {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			margin-top: 24rpx;

			.rate-num {
				color: #666666;
			}

			text {
				color: #EC1818;
			}
		}

		.tip {
			font-size: 24rpx;
			margin-top: 24rpx;
			line-height: 50rpx;
		}
	}

	.cash-way-wrap {
		padding: 24rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		margin-top: 32rpx;
		
		font-size: 28rpx;
		.cash-way-con{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		label {
			font-weight: bold;
		}

		.account-name {
			margin-top:24rpx;
			display: flex;
			align-items: center;
			label{
				width: 120rpx;
				font-weight: normal;
			}
		}

		.call {
			
		}
	}

	.btn {
		width: 686rpx;
		height: 84rpx;
		background: #1C1C1C;
		border-radius: 42rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 72rpx;
	}

	.cash-modal {
		width: 630rpx;
		height: 514rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		top: 386rpx;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			padding-top: 46rpx;
		}
	}

	.num-item {
		height: 64rpx;
		background: #F4F6F8;
		border-radius: 4rpx;
		justify-content: space-between;
		font-weight: bold;
		margin: 52rpx 28rpx 0;
		padding: 0 22rpx;
	}

	.num-item2 {
		color: #979797;
		margin: 0 50rpx;
		padding-top: 24rpx;
	}

	.num-item3 {
		color: #979797;
		margin: 0 50rpx;
		padding-top: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F4F6F8;
	}

	.modal-btn-wrap {
		margin: 52rpx 38rpx;
		display: flex;
		justify-content: space-between;

		.modal-btn {
			width: 260rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}

		.modal-btn1 {
			border: 1px solid #979797;
			box-sizing: border-box;
		}

		.modal-btn2 {
			background: #000000;
			color: #fff;
		}
	}
</style>